<template>
	<view class="phone-center">
		<view class="center-box flex ww100 hh100 u-border-top">

			<view class="bgc" @click="goPhone(1)">
				<image src="../../static/img.jpg" class="w330 h330 r20" mode=""></image>
				<view class="mt25 f28">
					免费相册(200)
				</view>
			</view>
			
			
			<!-- 没有图片 -->
			<!-- <view class="bgc1">
				<view class="text-center w330 h330 r20 pt113 mb25" style="background-color: #F5F5F5;">
					<image src="../../static/img/album.png" class="w50 h50" mode=""></image>
					<view class="" style="color: #999999;">
						暂无图片
					</view>
					<view class="">
			
					</view>
				</view>
				<text>付费相册(0)</text>
			</view> -->
			

			<view class="bgc1" @click="goPhone(8)">
				<view class="bgc-phone">
					立即解锁
				</view>
				<view class="bgc-text">
					<image src="../../static/img.jpg" class="w330 h330 r20" mode=""></image>
					<view class="mt25 f28">
						<text>付费相册(0)</text>
					</view>
				</view>
			</view>

			
		</view>


		<u-modal v-model="unlockModal" :show-cancel-button="true" confirm-color="#40C6A8" confirm="addUnlock"
			:content="content">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				unlockModal: false,
				content: '50星币解锁相册',
			}
		},
		onLoad(e) {
			this.userId = e.userId
			this.unlockList(this.userId)
		},
		methods: {
			addUnlock() {

			},
			
			// 1  免费相册
			// 8  需要付费
			goPhone(index) {
				// this.unlockModal = true
				this.l.to('/pages/home/phoneList?classText=' + index)
			},
			
			async unlockList(id) {
				const res = await this.$u.get(`api/user/unlock/unlockList/${id}`)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.phone-center {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;

		.center-box {
			padding: 30rpx;
		}

		.bgc-phone {
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			width: 330rpx;
			height: 330rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 330rpx;
			background: rgba(0, 0, 0, 0.6);
			background-size: 100%;
			background-repeat: no-repeat;
			border-radius: 20rpx;
			font-family: PingFang SC;
		}

		.bgc {
			position: relative;
			width: 330rpx;
			height: 330rpx;
			margin-right: 30rpx;

			.bgc-text {
				width: 330rpx;
				height: 390rpx;
				color: #000000;
			}
		}

		.bgc1 {
			position: relative;
			width: 330rpx;
			height: 330rpx;
			// overflow: hidden;

			.bgc-text {
				width: 330rpx;
				height: 390rpx;
				color: #000000;
			}
		}
	}
</style>
